import styled from "styled-components";
import {LightFontColor} from "@/style/Color";

export const PageDetailHeaderContainer = styled.div`
  width: 100%;
  height: auto;
  background-image: url(${props => props.photoUrl});
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% ;
  
`
export const ShadowBackground = styled.div`
  width: 100%;
  height: 100%;
  padding: 0 10px;
  background: rgb(0,0,0,0) linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 2.79%,rgba(0,0,0,0.35) 40.54%,#000000 100%);
`
export const PageDetailHeader_Header = styled.div`
  width: 100%;
  height: auto;
  color: ${LightFontColor};
  text-align: left;
  font-weight: 900;
  line-height: normal;
  padding: 40px 5px 10px 5px;
  font-size: 20px;
  margin: 0;
`
export const PageDetailHeader_Row = styled.div`
  width: 100%;
  height: 40px;
  padding: 10px 5px;
  text-align: left;
  color: ${LightFontColor};
  line-height: normal;
  margin: 0;
`

export const PageDetailHeader_RowItem = styled.span`
  width: 40px;
  float: left;
  height: 30px;
  cursor: pointer;
  line-height: 29px;

  span {
    width: auto;
    float: left;
    line-height: 30px;
  }
`
